.slds-button-group(role="group")
  button(type="button", nglButton, [nglPopover]="tip", nglPopoverVariant="walkthrough", nglPopoverHeader="Header", [nglPopoverFooter]="walkthrough", [(nglPopoverOpen)]="open.walkthrough") Walkthrough
  button(type="button", nglButton, [nglPopover]="tip", nglPopoverVariant="feature", [(nglPopoverOpen)]="open.feature") Feature
  button(type="button", nglButton, [nglPopover]="tip", nglPopoverVariant="warning", [nglPopoverHeader]="warning", [(nglPopoverOpen)]="open.warning") Warning
  button(type="button", nglButton, [nglPopover]="tip", nglPopoverVariant="error", [nglPopoverHeader]="error", [(nglPopoverOpen)]="open.error") Error
  button(type="button", nglButton, [nglPopover]="panelbody", nglPopoverVariant="panel", [nglPopoverHeader]="panelheader", [(nglPopoverOpen)]="open.panel") Panel

ng-template(#tip)
  | Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.

ng-template(#walkthrough)
  .slds-grid.slds-grid_vertical-align-center
    span.slds-text-title Step 4 of 4
    button.slds-button.slds-button_brand.slds-col_bump-left((click)="open.walkthrough = false") Finish

ng-template(#warning)
  .slds-media.slds-media_center.slds-has-flexi-truncate
    .slds-media__figure
      span.slds-icon_container.slds-icon-utility-warning
        ngl-icon(iconName="utility:warning", size="x-small")
    .slds-media__body
      h2.slds-truncate.slds-text-heading_medium Warning

ng-template(#error)
  .slds-media.slds-media_center.slds-has-flexi-truncate
    .slds-media__figure
      span.slds-icon_container.slds-icon-utility-error
        ngl-icon(iconName="utility:error", size="x-small", variant="inverse")
    .slds-media__body
      h2.slds-truncate.slds-text-heading_medium Error

ng-template(#panelheader)
  .slds-media.slds-media_center.slds-m-bottom_small
    span.slds-icon_container.slds-icon-standard-account.slds-media__figure
      ngl-icon(iconName="standard:account")
    .slds-media__body
      h2.slds-text-heading_medium.slds-hyphenate
        a(href='javascript:void(0);') Tesla Motors
  .slds-grid.slds-wrap.slds-grid_pull-padded
    .slds-p-horizontal_small.slds-size_1-of-2.slds-p-bottom_x-small
      dl
        dt
          p.slds-popover_panel__label.slds-truncate(title='Billing Address') Billing Address
        dd
          p.slds-truncate(title='3500 Deer Creek Rd.') 3500 Deer Creek Rd.
          p.slds-truncate(title='Palo Alto, CA 94304') Palo Alto, CA 94304

ng-template(#panelbody)
  dl.slds-popover__body-list
    dt.slds-m-bottom_small
      .slds-media.slds-media_center
        .slds-media__figure
          span.slds-icon_container.slds-icon-standard-opportunity
            ngl-icon(iconName="standard:opportunity")
            span.slds-assistive-text Opportunities
        .slds-media__body
          p.slds-text-heading_small.slds-hyphenate Opportunities (2+)
    dd.slds-m-top_x-small
      p.slds-truncate
        a Tesla - Mule ESB
      dl.slds-list_horizontal.slds-wrap.slds-text-body_small
        dt.slds-item_label.slds-text-color_weak.slds-truncate Value
        dd.slds-item_detail.slds-text-color_weak.slds-truncate $500,000
        dt.slds-item_label.slds-text-color_weak.slds-truncate Close Date
        dd.slds-item_detail.slds-text-color_weak.slds-truncate Dec 15, 2015
    dd.slds-m-top_x-small.slds-text-align_right
      a View All
